<div class="page-shell">
    <!-- <h3>导航区</div> -->
    <div class="shell-nav">
        <div class="brand" data-bind="text:app.title"></div>
        <!-- <h3>路由导航</h3> -->
        <ul class="root-router" data-bind="foreach: getRootRouter()">
            <!-- ko if:$data.hasChild===undefined -->
            <li class="root-router-item" data-bind="css: { active: isActive }">
                <a class="root-router-name" data-bind="attr: { href: hash }, text: ($index()+1)+'. '+title+' | hash:'+hash+' | isActive:'+isActive()"></a>
            </li>
            <!-- /ko -->
            <!-- ko ifnot:$data.hasChild===undefined -->
            <li class="root-router-item has-child">
                <a class="root-router-name">
                    <span data-bind="text: title"></span>
                </a>
                <ul class="child-router" data-bind="foreach:$root.getChildRouter(hash)">
                    <li class="child-router-item" data-bind="css: { active: isActive }">
                        <a class="child-router-name" data-bind="attr: { href: hash }, text: title"></a>
                    </li>
                </ul>
            </li>
            <!-- /ko -->
        </ul>
    </div>
    <!-- <h3>内容区</h3> -->
    <div class="shell-host" data-bind="router: {}"></div>
</div>